<template>
  <v-container fluid fill-height>
    <v-layout align-center justify-center>
      <v-row>
        <v-col v-for="item in items" :key="item.title" cols="6">
          <v-container fluid fill-height>
            <v-layout align-center justify-center>
              <v-card
                :elevation="4"
                :to="item.to"
                width="200px"
                height="200px"
                color="green"
                dark
              >
                <v-container fill-height>
                  <v-layout align-center justify-center>
                    <v-card-title
                      v-text="item.title"
                      justify-center
                      align-center
                    />
                  </v-layout>
                </v-container>
              </v-card>
            </v-layout>
          </v-container>
        </v-col>
      </v-row>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    items: [
      {
        title: "教师界面",
        to: {
          name: "教师课程主页"
        }
      },
      {
        title: "学生界面",
        to: {
          name: "课程主页"
        }
      }
    ]
  })
};
</script>
